import { h } from "vue";
import ContextMenu from "@imengyu/vue3-context-menu";
import {
  House,
  FolderOpened,
  Document,
  Download,
} from "@element-plus/icons-vue";
import { Callback } from "@/lib/vars";

type ContextMenuItemEvent = {
  x: number;
  y: number;
  itemId: string;
};

export const load_sample = "load_sample",
  open_er_code = "open_er_code",
  open_loacl_file = "open_loacl_file";

const showContextMenu = (
  x: number,
  y: number,
  callback: Callback<ContextMenuItemEvent>
) => {
  ContextMenu.showContextMenu({
    x: x,
    y: y,
    //preserveIconWidth: false,
    items: [
      {
        label: "打开模型源代码",
        icon: h(
          "el-icon",
          {
            style: {
              width: "20px",
              height: "20px",
            },
          },
          [h(Document)]
        ),
        onClick: () => {
          callback(null, { x: x, y: y, itemId: open_er_code });
        },
      },
      {
        label: "表模型",
        icon: h(
          "el-icon",
          {
            style: {
              width: "20px",
              height: "20px",
            },
          },
          [h(House)]
        ),
        children: [
          {
            label: "打开本地文件",
            icon: h(
              "el-icon",
              {
                style: {
                  width: "20px",
                  height: "20px",
                },
              },
              [h(FolderOpened)]
            ),
            onClick: () => {
              callback(null, { x: x, y: y, itemId: open_loacl_file });
            },
          },
          {
            label: "Item1",
            children: [
              {
                label: "Item1",
                children: [
                  { label: "Item1" },
                  { label: "Item2" },
                  {
                    label: "Item3",
                    children: [
                      { label: "Item1" },
                      { label: "Item2" },
                      { label: "Item3" },
                    ],
                  },
                ],
              },
              { label: "Item2" },
              { label: "Item3" },
            ],
          },
          { label: "Item2" },
          { label: "Item3" },
        ],
      },
      {
        label: "加载示例ER模型",
        icon: h(
          "el-icon",
          {
            style: {
              width: "20px",
              height: "20px",
            },
          },
          [h(Download)]
        ),
        onClick: () => {
          callback(null, { x: x, y: y, itemId: load_sample });
        },
      },
    ],
  });
};

export { showContextMenu, ContextMenuItemEvent };
